<template>
  <el-container direction="vertical" class="container">
    <el-row>
      <el-col :span="8">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addHandler">新增会员服务</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;height: 600px;margin-top: 10px;"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <!-- <el-table-column
            prop="id"
            label="服务编号"
            width="200"
            align="center"
          /> -->
          <el-table-column
            prop="name"
            label="会员名称"
            width="400"
            align="center"
          />
          <el-table-column
            prop="price"
            label="会员价格"
            align="center"
          />
          <el-table-column
            prop="discount"
            label="享受折扣"
            align="center"
          />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="medium"
                icon="el-icon-edit-outline"
                title="编辑"
                round
                @click="editHandler(scope.$index, scope.row)"
              />
              <el-button
                size="medium"
                type="danger"
                title="删除"
                icon="el-icon-delete"
                round
                @click="handleDelete(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <keep-alive>
      <VipDialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        :dialog-title="dialogTitle"
        @closeDialog="closeHandler"
        @addDialog="addHandler"
        @editDialog="editHandler"
        @getTable="getTable"
      />
    </keep-alive>

    <!-- <notice-dialog :dialog-visible="dialogFormVisible" :close-dialog="closeDialog" /> -->

  </el-container>

</template>

<script>
import { getVipList, delVipService } from '@/api/vip'
// import { getToken } from '@/utils/auth'
// import { parseTime } from '@/utils/index'
import waves from '@/directive/waves' // waves directive
import { Message, MessageBox } from 'element-ui'
import VipDialog from './components/vipDialog'
export default {
  name: 'Vip',
  components: { VipDialog },
  directives: { waves },
  data() {
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('密码长度必须大于6位'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      listLoading: true, // 列表加载动画
      // downloadLoading: false,
      // currUser: this.$store.getters.roles, // 获取当前登录用户
      tableData: null, // 表格数据
      isHidePage: false, // 是否隐藏分页
      dialogFormVisible: false, // 对话框是否隐藏
      dialogTitle: '',
      chooseData: {
        id: ''
      }
    }
  },
  created() {
    this.getTable()
  },
  // activated() {
  //   this.$on('dialogClose', this.dialogFormVisible = false)
  // },
  methods: {
    addHandler() {
      this.dialogFormVisible = true
      this.dialogTitle = '添加会员服务'
    },
    editHandler(index, row) {
      this.dialogFormVisible = true
      this.chooseData.id = row.id
      this.dialogTitle = '编辑会员服务'
    },
    closeHandler() {
      this.dialogFormVisible = false
      this.chooseData = {
        id: ''
      }
    },
    // onSubmit() {
    //   this.tableQuery.name = this.searchForm.name
    //   this.tableQuery.year = this.searchForm.year
    //   this.tableQuery.month = this.searchForm.month
    //   this.getTable()
    // },
    getTable() {
      this.listLoading = true
      getVipList().then(response => {
        if (response) {
          const list = response.data.list
          // list.forEach(element => {
          //   element.allWage = element.baseWage * element.rating
          // })
          this.tableData = list
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 1000)
        }
        this.listLoading = false
      })
      // if(this.$store.getters.roles)
    },
    handleDelete(index, row) {
      MessageBox.confirm('将删除该会员服务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delVipService(row.id).then(response => {
          Message({
            message: response.data.message,
            type: 'success',
            duration: 5 * 1000
          })
        })
        this.getTable()
      }).catch(error => error)
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  padding: 10px;
  a:hover{
    color: blue;
    text-decoration: underline;
  }
}
</style>
